<script>
  /** 业务组件-用户下拉选择器 */
  import { getAllUser } from '@/api/system/user.js';
  import VSelect from '@/components/common/virtual/v-select/index.vue';
  export default {
    name: 'UserSelect',
    components: {
      VSelect,
    },
    props: {
      modelValue: {
        type: [Number, String, Array, Object], // 如果绑定值为数组，则为多选,否则为单选
        default: '',
      },
      isObjectValue: {
        // select框绑定的值是对象 还是值
        type: Boolean,
        default: false,
      },
      opsData: {
        // { id: 'user1', nickname: 'user1' },
        type: [Boolean, Array],
        default: false,
      },
      useVirtual: {
        // 是否使用单例组件
        type: Boolean,
        default: false,
      },
    },
    // inheritAttrs: false,
    emits: ['update:modelValue'],
    data() {
      return {
        userList: [],
      };
    },
    computed: {
      isMultiple() {
        return Array.isArray(this.modelValue);
      },
    },
    watch: {
      opsData() {
        this.getUserList();
      },
    },
    created() {
      this.getUserList();
    },
    methods: {
      async getUserList() {
        // 如果有传值选项数据优先用传入选项
        if (this.opsData) {
          this.userList = [...this.opsData];
          return;
        }

        const res = await getAllUser();
        this.userList = res.data;
      },
      change(val) {
        this.$emit('update:modelValue', val);
      },
    },
  };
</script>

<template>
  <el-select
    v-if="!useVirtual"
    value-key="id"
    :model-value="modelValue"
    :multiple="isMultiple"
    @change="change"
  >
    <el-option
      v-for="item in userList"
      :key="item.id"
      :label="item.nickname"
      :value="isObjectValue ? item : item.id"
    />
  </el-select>
  <VSelect
    v-else
    :ops-data="userList"
    value-key="id"
    label-key="nickname"
    :is-object-value="isObjectValue"
    :model-value="modelValue"
    :multiple="isMultiple"
    @change="change"
  />
</template>

<style lang="scss" scoped>
  .el-select {
    height: 32px;
    :deep(.el-input) {
      height: 32px;
    }
    :deep(.el-select__tags) {
      height: 32px;
      .el-select-tags-wrapper {
        height: 35px;
        display: flex;
        overflow: auto;
      }
    }
  }
</style>
